---
id: collapsible
title: Collapsible
description: An interactive component that can be expanded or collapsed.
---

<ComponentPreview id="Collapsible" />

## Animation

You can use CSS animations to create smooth transitions for opening and closing the Collapsible content. Utilize the
`data-state` attribute in combination with the `--height` CSS variable to animate the open and closed states.

```css
@keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--height);
  }
}

@keyframes slideUp {
  from {
    height: var(--height);
  }
  to {
    height: 0;
  }
}

[data-scope='collapsible'][data-part='content'][data-state='open'] {
  animation: slideDown 250ms;
}

[data-scope='collapsible'][data-part='content'][data-state='closed'] {
  animation: slideUp 200ms;
}
```

## Examples

Learn how to use the `Collapsible` component in your project. Let's examine the most basic example

<Example id="basic" />

### Disabled

Use the `disabled` prop to disable the collapsible and prevent it from being toggled.

<Example id="disabled" />

### Partial Collapse

Use the `collapsedHeight` or `collapsedWidth` props to create a "show more/less" pattern. When set, the content
maintains the specified dimensions when collapsed instead of collapsing to 0px.

We expose the `--collapsed-height` or `--collapsed-width` variables to use in your CSS animations.

<Example id="partial-collapse" />

> Interactive elements (links, buttons, inputs) within the collapsed area automatically become `inert` to prevent
> keyboard navigation to hidden content.

### Nested Collapsibles

You can nest collapsibles within collapsibles to create hierarchical content structures.

<Example id="nested-collapsible" />

### Events

Use `onExitComplete` callback to listen for when the `Collapsible.Content` is no longer visible

<Example id="on-exit-complete" />

### Lazy Mount

To delay the mounting of the `Collapsible.Content`, use the `lazyMount` prop

<Example id="lazy-mount" />

### Unmount on Exit

To remove the `Collapsible.Content` from the DOM when it is not visible, use the `unmountOnExit` prop

<Example id="unmount-on-exit" />

### Lazy Mount + Unmount on Exit

Both `lazyMount` and `unmountOnExit` can be combined to ensure that the component is mounted only when the `Collapsible`
is expanded and unmounted when it is collapsed:

<Example id="lazy-mount-and-unmount-on-exit" />

### Root Provider

Use the `useCollapsible` hook to create the collapsible store and pass it to the `Collapsible.RootProvider` component.
This allows you to have maximum control over the collapsible programmatically.

<Example id="root-provider" />

> If you're using the `Collapsible.RootProvider` component, you don't need to use the `Collapsible.Root` component.

### Programmatic Control

Use the `useCollapsible` hook with `Collapsible.RootProvider` to programmatically control the collapsible using the
`setOpen()` method and read state properties like `open` and `visible`.

<Example id="programmatic-open" />

## Guides

### Animating the Indicator

To rotate the indicator icon (such as a chevron) when the collapsible opens and closes, use CSS transforms with the
`data-state` attribute:

```css
[data-scope='collapsible'][data-part='indicator'] {
  transition: transform 200ms;

  &[data-state='open'] {
    transform: rotate(180deg);
  }
}
```

### `open` vs `visible`

When using `useCollapsible` or `useCollapsibleContext`, you can access the `open` and `visible` state properties. They
seem similar but serve different purposes:

- **`open`**: Indicates the intended state of the collapsible. This is `true` when the collapsible should be expanded
  and `false` when it should be collapsed. This changes immediately when triggered.

- **`visible`**: Indicates whether the content is currently visible in the DOM. This accounts for exit animations - the
  content remains `visible` while the closing animation plays, even though `open` is already `false`. Once the animation
  completes, `visible` becomes `false`.

### Animating the Content

Use the `--height` and/or `--width` CSS variables to animate the size of the content when it expands or closes.

If you use `collapsedHeight` or `collapsedWidth`, update your CSS animations to use the `--collapsed-height` or
`--collapsed-width` variables as the starting/ending point:

```css
@keyframes expand {
  from {
    height: var(--collapsed-height, 0);
  }
  to {
    height: var(--height);
  }
}

@keyframes collapse {
  from {
    height: var(--height);
  }
  to {
    height: var(--collapsed-height, 0);
  }
}

[data-scope='collapsible'][data-part='content'] {
  &[data-state='open'] {
    animation: expand 250ms;
  }
  &[data-state='closed'] {
    animation: collapse 250ms;
  }
}
```

## API Reference

### Props

<ComponentTypes id="collapsible" />

### Context

These are the properties available when using `Collapsible.Context`, `useCollapsibleContext` hook or `useCollapsible`
hook.

<ContextType id="collapsible" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="collapsible" />
